<template>
  <page-view class="flex-column">
    <div class="content-box flex-1">
      <transition :name="slideDirect">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
    <ul class="tab-bar flex-row j-s-a">
      <!-- 新写法 -->
      <router-link :to="{name:'chooseFood'}" custom #default="{navigate,isActive}">
        <li :class="{'text-primary':isActive}" @click="navigate">
          <span class="iconfont iconcanju"></span>
          点餐
        </li>
      </router-link>

      <router-link :to="{name:'order'}" custom #default="{navigate,isActive}">
        <li :class="{'text-primary':isActive}" @click="navigate">
          <span class="iconfont icondingdan"></span>
          订单
        </li>
      </router-link>

      <router-link :to="{name:'category'}" custom #default="{navigate,isActive}">
        <li :class="{'text-primary':isActive}" @click="navigate">
          <span class="iconfont iconfenlei"></span>
          分类
        </li>
      </router-link>

      <router-link :to="{name:'my'}" custom #default="{navigate,isActive}">
        <li :class="{'text-primary':isActive}" @click="navigate">
          <span class="iconfont iconyonghuming"></span>
          我的
        </li>
      </router-link>
    </ul>
  </page-view>
</template>
<script>
export default {
  name: "home",
  data(){
    return {
      slideDirect:"slide-left"
    }
  },
  watch:{
    $route(to,from){
      if (from.meta.index < to.meta.index){
        this.slideDirect = "slide-left";
      }else {
        this.slideDirect = "slide-right";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.tab-bar {
  height: 55px;
  // border-top: 1px solid lightgray;
  background-color: #ffffff;
  box-shadow: -5px 0px 15px 5px lightgray;
}

li {
  font-size: .14rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;

  .iconfont {
    font-size: 0.22rem;
  }
}

.slide-left-enter,
.slide-right-leave-to{
  transform: translateX(100%);
}
.slide-left-enter-to,
.slide-left-leave,
.slide-right-enter-to,
.slide-right-leave {
  transform: translateX(0);
}
.slide-left-leave-to,
.slide-right-enter{
  transform: translateX(-100%);
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active{
  transition: all 0.1s linear;
}
</style>